<template>
    <div>
        <!-- 粘性布局 -->
        <van-sticky>
            <!-- 导航栏 -->
            <van-nav-bar
                    title="商品查询"
                    left-text="返回"
                    left-arrow
                    @click-left="goStore"
            ></van-nav-bar>
            <!-- 标题 -->
        </van-sticky>
        <van-row style="background: #ffffff" :model="products">
            <van-col span="21">
                <van-search
                        v-model="productName"
                        shape="round"
                        placeholder="请输入商品名称"
                        @search="serchProduct"
                />
            </van-col>
            <van-col
                    span="3"
                    style="margin-top: 15px; text-align: left; font-size: 24px"
            >
                <van-icon name="search"
                      @click="serchProduct"
                />
            </van-col>
        </van-row>
        <van-tabs
                color="#1989FA"
                title-active-color="#1989FA"
                animated
        >
            <van-tab>
                <!-- column-num:设置列数 -->
                <van-grid
                        :border="false"
                        :column-num="2"
                >
                    <van-grid-item
                            v-for="product in products"
                            :key="product.productId"
                            @click="goCommodity(product)"
                    >
<!--                        <van-image :src="product.picture"/>-->
                        <div style="width: 100%;height: 180px">
                            <img :src="product.picture" style="width: 100%;height: 180px" alt="">
                        </div>
                        <div style="text-align: left; width: 100%; margin: 8px; height: 40px">
                            {{product.productName}}
                        </div>
                        <!-- 如果启动积分 并且现价大于0 那么显示该布局 -->
                        <span
                                style="text-align: left;
                    margin: -11px;
                    color: red;
                    position: relative;
                    left: -29px;
                    top: -7px;"
                                v-if="product.integralEnabled === '0' && product.newPrice>0"
                        >
              <span style="font-size: 22px">{{ product.integral }}</span>积分+￥
              <span style="font-size: 22px;
                          position: relative;
                          left: -7px;">
              {{ product.newPrice }}</span>
            </span>
                        <!-- 如果现价小于0显示该布局 -->
                        <span
                                style="text-align: left;
                    margin: -11px;
                    color: red;
                    position: relative;
                    left:-61px;
                    top: -7px;"
                                v-else-if="product.newPrice<=0"
                        >
              <span style="font-size: 22px">{{ product.integral }}</span>积分
            </span>
                        <!-- 如果不启用积分 就使用该布局 -->
                        <span
                                style="text-align: left;
                    margin: -11px;
                    color: red;
                    position: relative;
                    left:-61px;
                    top: -7px;"
                                v-else
                        >
              ￥<span style="font-size: 22px">{{ product.newPrice }}</span>
            </span>
                        <div style="margin: 8px; width: 100%">
              <span style="
                      font-size: 14px;
                      color: gray;
                      text-decoration: line-through;
                      display: block;
                      float: left;
                    ">￥{{product.loadPrice}}</span>
                            <span style="display: block; float: right">月销{{product.monthlySales}}</span>
                        </div>
                        <div style="text-align: left; width: 100%; margin: 8px; height: 30px">
                            {{product.storeName}}&nbsp;&nbsp;<van-icon name="arrow"/>
                        </div>
                    </van-grid-item>
                </van-grid>
            </van-tab>
        </van-tabs>



    </div>

</template>

<script>
    export default {
        name: "SearchPage",
        data(){
            return{
                productName:'',
                products:[],
            }
        },
        created(){
            this.selectProductAndStoreNameByProductName();
        },
        methods:{
            selectProductAndStoreNameByProductName(){
                this.$http.post("/product/list/selectProductAndStoreNameByProductName?productName=" + this.productName)
                    .then(resp => {
                        this.products = resp.data.data;
                    })
            },
            serchProduct(){
                this.selectProductAndStoreNameByProductName();
            },
            // 跳转商品页面
            goCommodity(product) {
                //  路径/store对应router目录下index.js中定义的path属性值
                this.$router.push({
                    path: "/SingleCommodity",
                    query: {
                        data: JSON.stringify(product),
                    },
                });
            },
            //跳转商城页面
            goStore() {
                //  go(-1):返回上一级路由
                this.$router.go(-1);
            },

        }
    }
</script>

<style scoped>

</style>
